// ----- Boxes & Foldable boxes styles.
.foldableBox {
  background-color: $shade-light-0;
  border: 1px solid $shade-light-30;
  border-radius: $common-radius;
  font-size: .9em;
  margin-bottom: 1.8em;
}

.foldableBox h3,
.gridBox .foldableBox h3 {
  border-bottom: 1px solid transparent;
  display: inline-block;
  font-size: 1.15em;
  font-weight: normal;
  margin: 0;
  min-height: 1.3em;
  padding: .7em 1em;
}

.foldableBox .folded a.foldableHeaderLink,
.foldableLightBox .folded a.foldableHeaderLink,
.foldableLightBox h3.folded a.foldableHeaderLink {
  background: transparent url('${basePath}/icons/unfold.png') no-repeat left center;
  padding: 0 1em 0 1.7em;
}

.foldableBox .unfolded a.foldableHeaderLink,
.foldableLightBox .unfolded a.foldableHeaderLink,
.foldableLightBox h3.unfolded a.foldableHeaderLink {
  background: transparent url('${basePath}/icons/fold.png') no-repeat left center;
  clear: both;
  padding: 0 1em 0 1.7em;
}

.foldableBox div.folded,
.foldableBox div.unfolded {
  padding: 0 .6em;
}

.foldableBox div.folded a.foldableHeaderLink,
.foldableBox div.unfolded a.foldableHeaderLink,
.foldableBox div.foldedDisabled a.foldableHeaderLink {
  border-bottom: 1px solid transparent;
  color: $font-color;
  display: inline-block;
  font-size: 1.15em;
  font-weight: bold;
  min-height: 1.3em;
  padding: .7em 1em .7em 1.7em;
}

.foldableBox div.foldedDisabled a.foldableHeaderLink {
  padding-left: 1em;
}

.foldableBox h3 img.tipsyShow {
  cursor: help;
  padding-top: .2em;
}

.foldableBox h3.foldedDisabled {
  color: $shade-strong-10;
}

.foldableBox h3 a,
.foldableBox h3 span,
.foldableBox h3 a:visited {
  color: $font-color;
  display: block;
  float: left;
  padding-right: 1em;
  text-decoration: none;
}

.foldableBox h3 a.warningLink {
  color: $warning-label;
}

.foldableBox .boxBody {
  border-top: 1px solid $shade-light-30;
  clear: both;
  font-size: 1.05em;
  overflow-x: auto;
  padding: 1em;
}

.foldableBox div.foldableLightBox a.foldableHeaderLink {
  font-size: .9em;
  padding: 0 1em 0 1.7em;
}

.foldableBox .listingLayoutSelector {
  margin: 0 0 0 .7em;
}

// =Light boxes
.foldableLightBox {
  margin-bottom: 1.8em;
}

.foldableLightBox div.folded a,
.foldableLightBox div.unfolded a {
  color: $font-color;
  float: left;
  margin: 0;
  padding: 0 .4em;
  text-decoration: none;
}

.foldableLightBox div.folded,
.foldableLightBox div.unfolded {
  font-size: .9em;
}

.foldableLightBox .foldableHeaderLink {
  border: 1px solid $shade-medium-20;
  border-radius: $common-radius;
  line-height: 2.1em; }

.foldableLightBox .boxBody {
  background-color: $shade-light-0;
  border: 1px solid $shade-light-50;
  clear: both;
  font-size: .85em;
  padding: 1em;
}

.massEditForm foldableBox {
  margin-right: 1.4em;
}

// =Simple boxes
.grayBox,
.simpleBox {
  border: 1px solid $shade-light-50;
  box-sizing: border-box;
  color: $font-color;
  margin: 0 .5em .5em 0;
  padding: .5em;
  text-align: left;
}

.simpleBox {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 350px;
}

.grayBox {
  background-color: $shade-light-10;
  width: 100%;
}

.widgetTable .grayBox,
.widgetTable .simpleBox {
  margin: .1em auto .5em;
}

.grayBox .textBlock {
  font-size: 1em;
  padding: .6em .8em .8em;
}

.grayBox .textBlock span {
  line-height: 130%;
}

// =Bubble boxes
.bubbleBox {
  background-color: $shade-light-0;
  border: 1px solid $shade-light-30;
  border-radius: $common-radius;
  display: block;
  margin: 0 1em 1em 0;
  padding: 0 1em 1em;
}

.bubbleBoxSmall {
  max-width: 300px;
}

.bubbleBox .bubbleHeader {
  border-color: $shade-light-50;
  border-style: none none solid;
  border-width: 1px;
  margin: 0 0 1em;
  overflow: hidden;
  padding: .8em 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bubbleBox .bubbleHeader h3 {
  border: 0;
  display: inline-block;
  margin: 0;
  padding: .3em 0;
}

.bubbleHeader .label {
  margin: 0 .5em;
  vertical-align: bottom;
}

.bubbleBox .bubbleHeader input.button {
  float: right;
  margin: .3em 0 0;
}

.bubbleBox h3 img {
  margin-bottom: -.1em;
  padding: 0 .5em 0 0;
}

a.bubbleBox:hover {
  background: none $shade-light-10;
  color: $font-color;
  text-decoration: none;
}

// Stop max-width for dataInput nested in boxes
.foldableLightBox .dataInput,
.grayBox .dataInput,
.simpleBox .dataInput {
  max-width: none;
}
